
import { memo } from 'react'
import TimeLinkModel, { dateStr } from '@models/timeLinkModel'
import { Steps } from 'antd-mobile';
// @ts-ignore
import Styles from './index.scss'

const Step = Steps.Step;

interface PropsInterface {
  models: TimeLinkModel[]
}
const HomeLinks = (props: PropsInterface) => {

  return (
    <div className={Styles['com-home-time-line']}>
      <Steps size="small" current={ props.models.length }>
        {
          props.models.map((item) => {
            return <Step
              title={item.title}
              key={ item._id }
              description={
                <>
                  <p className={ Styles.time }>{ dateStr(item) }</p>
                  <p className={ Styles.content }>{ item.content }</p>
                </>
              } />
          })
        }
      </Steps>
    </div>
  )
}

export default memo(HomeLinks)